body{
	font-size: 26px;
	color: #fff;
	min-width: 1200px;
}
.rightbar{
	position: fixed;
	top: 50%;
	margin-top: -200px;
	right: 0px;
	width: 80px;
	border-radius: 10px;
	background: rgba(0,0,0,.5);
	z-index: 10;
	visibility: hidden;
	opacity: 0;
	transition: 1s;
}
.circle{
	border: 2px solid #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin: 10px auto;
}
.circle:hover{
	background: #fff;
}
.circle-backg{
	background: #fff;
}
.showBox{
	float: left;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.showBox:hover .to-small{
	opacity: 1;
}
.title{
	position: absolute;
	top: 80px;
	left: 50%;
	margin-left: -115px;
	border: 2px solid #fff;
	font-size: 40px;
	color: #fff;
	width: 230px;
	height: 66px;
	line-height: 66px;
	text-align: center;			
	z-index: 10;
}
.page1{
	background: #3385FF;
}
.page2{
	background: #26B1B6;
}
.page3{
	background: #129DE7;
}
.page4{
	background: #66c;
}
.page5{
	background: #9C58B6;
}
.page6{
	background: #ED6461;
}
.to-small{
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	opacity: 0;
	transition: 1s;
}
/*第一页*/
.photo{
	position: absolute;
	top: 80px;
	left: 60px;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	border: 2px #fff solid;
	overflow: hidden;
}
.photo2{
	position: absolute;
	top: 150px;
	left: 60px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 2px #fff solid;
	overflow: hidden;
}
.photo3{
	position: absolute;
	top: 180px;
	left: 30px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 2px #fff solid;
	overflow: hidden;
}
.page1 img{
	width: 100%;
	height: 100%;
}
.across{
	position: absolute;
	top: 120px;
	left: 330px;
	width: 230px;
	height: 10px;
	overflow: hidden;
}
.acrossbar{
	position: absolute;
	left: -240px;
	width: 240px;
	height: 2px;
	background: #fff;
	transition: .5s;
}
.title1{
	background: #3385FF;
}
.vertical{
	position: absolute;
	left: 50%;
	top: 150px;
	/*border: 1px solid #f00;*/
	width: 10px;
	height: 400px;
	overflow: hidden;
	z-index: 1;
}
.verticalbar{
	position: absolute;
	top: -410px;
	width: 2px;
	height: 410px;
	background: #fff;
	transition: .5s;
}
.left,.right{
	float: left;
	width: 50%;
	height: 100%;
}
.infotitle{
	float: right;
	margin-top: 200px;
	overflow: hidden;
}
.infot{
	margin: 10px;
	text-align: right;	
}
.page1 .shaker{
	animation: shaker .5s 1.3s linear;
}
@keyframes shaker{
	25%{
		transform: translateX(10px);
	}
	50%{
		transform: translateX(0px);
	}
	75%{
		transform: translateX(4px);
	}
}
.infocont{
	float: left;
	margin-top: 200px;
	overflow: hidden;
}
.infoc{
	color: #fff;
	margin: 10px;
	opacity: 0;
}
.page1 .fade{
	animation: fade 1s 1.8s forwards;
}
@keyframes fade{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/*第二页*/
.educont{
	transition: 1s;
}
.educont1{
	position: absolute;
	top: 170px;
	left: 40%;
	opacity: .3;
	transform: rotate(120deg);
}
.educont2{
	position: absolute;
	top: 210px;
	left: 45%;
	opacity: .5;
	transform: rotate(45deg);
}
.educont3{
	position: absolute;
	top: 260px;
	left: 59%;
	opacity: .3;
	transform: rotate(-70deg);
}
.educont4{
	position: absolute;
	top: 310px;
	left: 40%;
	opacity: .4;
	transform: rotate(170deg);
}
.dropwrap{
	position: absolute;
	top: 0;
	left: 50%;
	width: 60%;
	height: 383px;
	margin-left: -30%;
	overflow: hidden;
}
.tpy{
	position: absolute;
	font-size: 54px;
	opacity: 0;
	animation: jump 2s 1s forwards;
}
@keyframes jump{
	to{
		font-size: 26px;
	}
}
.text{
	margin-top: 10px;
	font-size: 20px;
}
/**/
.rangeColor{
	position: absolute;
	top: 0px;
    display: block;
    height: 10px;
    border-radius: 10px;
    background-color: #3385FF;
}
.skill-bar{
	background-color: #bdc3c7;
    width: 100%;
    height: 10px;
    border-radius: 10px;
    margin: 5px auto;
}
/**/
.center-skills{
	width: 70%;
	height: 50%;
	margin: 200px auto;
	/*border: 1px solid #f00;*/
}
.skills-left{
	float: left;
	width: 40%;
	height: 100%;
}
.skills-right{
	float: left;
	width: 60%;
	height: 100%;
}
table{
	width: 100%;
}
th{
	font-weight: normal;
	width: 40%;
	text-align: left;
	border-bottom: 1px solid #fff;
	padding: 5px 10px;
}
td{
	width: 60%;
	border-bottom: 1px solid #fff;
	/*padding-left: 10px;*/
	text-align: center;
}
a{
	color: #fff;
}
.the-demo{
	margin-bottom: 10px;
}
.flexbox{
	width: 90%;
	height: 60%;
	margin: 0 auto;
	margin-top: 200px;
	display: flex;
	flex-flow:column wrap;
}
.flex{
	flex:1;
	text-align: center;
	margin:0 auto;
}
.link{
	word-wrap:break-word;
}